import 'package:flutter/material.dart'; // material样式一个ui库

void main() =>
    runApp(MyApp(items: new List<String>.generate(100, (i) => "Item $i")));

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key, @required this.items})
      : super(key: key); // dart构造函数 @required必须传的参数

  @override // 需要返回一个组件
  Widget build(BuildContext context) {
    // return MaterialApp(
    //   title: 'hello world!',
    //   home: Scaffold(
    //     appBar: AppBar(title: Text('Flutter App')),
    //     body: Center(
    //       // child: Text( // Text组件
    //       //   'welcome to flutter!',
    //       //   textAlign: TextAlign.left, // 样式
    //       //   overflow: TextOverflow.ellipsis,
    //       //   style: TextStyle(
    //       //       fontSize: 25.0,
    //       //       color: Color.fromARGB(255, 255, 125, 125),
    //       //       decoration: TextDecoration.underline),
    //       // ),
    //       // child: Container( // Container组件
    //       //   alignment: Alignment.bottomCenter, // 位置
    //       //   width: 500.0, // 宽
    //       //   height: 400.0, // 高
    //       //   // color: Colors.lightBlue, // 背景色
    //       //   // padding: const EdgeInsets.all(10.0), // const是不变的意思
    //       //   padding: const EdgeInsets.fromLTRB(20.0, 100.0, 20.0, 100.0),
    //       //   margin: const EdgeInsets.all(10.0),
    //       //   decoration: new BoxDecoration(
    //       //     gradient: const LinearGradient(
    //       //       colors: [
    //       //         Colors.lightBlue,
    //       //         Colors.greenAccent
    //       //       ], // 这个会和Container的背景色冲突
    //       //     ),
    //       //   ),
    //       //   child: new Text(
    //       //     'Container child',
    //       //     style: TextStyle(
    //       //       color: Color.fromARGB(255, 255, 255, 255),
    //       //       fontSize: 30.0,
    //       //     ),
    //       //   ),
    //       // ),
    //       // child: Container( // Image组件
    //       //   width: 300.0,
    //       //   height: 400.0,
    //       //   color: Colors.lightBlue,
    //       //   child: new Image.network(
    //       //     // 图片
    //       //     'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
    //       //     fit: BoxFit.contain, // 充满
    //       //     color: Colors.green, // 图片背景色
    //       //     colorBlendMode: BlendMode.lighten, // 图片背景色模式
    //       //     repeat: ImageRepeat.repeat, // 重复
    //       //   ),
    //       // ),
    //     ),
    //   ),
    // );

    // return MaterialApp(
    //   title: 'List',
    //   home: Scaffold(
    //     appBar: AppBar(
    //       title: Text('listView'),
    //     ),
    //     body: Center(
    //       child: Container(
    //         width: 300.0,
    //         height: 500.0,
    //         child: new ListView.builder( // ListView组件
    //           // 传入的数组(模拟请求)
    //           itemCount: items.length, // 列表长度
    //           itemBuilder: (context, index) => new ListTile(
    //             title: new Text('${items[index]}'),
    //           ),
    //         ),
    //         // child: ListViewCom(), // 调用封装的Widget插件
    //       ),
    //     ),
    //   ),
    // );

    // return MaterialApp(
    //     title: '',
    //     home: Scaffold(
    //       appBar: AppBar(
    //         title: new Text(''),
    //       ),
    //       body: GridView(
    //         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //           crossAxisCount: 3, // 3行
    //           mainAxisSpacing: 2.0, //上下间隔
    //           crossAxisSpacing: 2.0, //左右间隔
    //           childAspectRatio: 2, // 宽高比
    //         ),
    //         children: <Widget>[
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //           new Image.network(
    //               'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //         ],
    //       ),
    //     ));

    // return MaterialApp(
    //     title: '',
    //     home: Scaffold(
    //       appBar: AppBar(
    //         title: Text('5678654356754678'),
    //       ),
    //       body: new Row(
    //         // 横向布局
    //         children: <Widget>[
    //           Expanded(
    //             // 灵活布局
    //             child: new RaisedButton(
    //               onPressed: () {},
    //               color: Colors.lightBlue,
    //               child: Text('button'),
    //             ),
    //           ),
    //           new RaisedButton(
    //             onPressed: () {},
    //             color: Colors.lightBlue,
    //             child: Text('button'),
    //           ),
    //           new RaisedButton(
    //             onPressed: () {},
    //             color: Colors.lightBlue,
    //             child: Text('button'),
    //           ),
    //         ],
    //       ),
    //     ));

    // return MaterialApp(
    //     title: '',
    //     home: Scaffold(
    //         appBar: AppBar(title: Text('23456789')),
    //         body: Center(
    //           child: Column(
    //             //纵向布局
    //             crossAxisAlignment: CrossAxisAlignment.center, // 小格子内容居中
    //             mainAxisAlignment: MainAxisAlignment.center, // 总体垂直居中
    //             children: <Widget>[
    //               Text('34567890-='),
    //               Expanded(child: Text('34567890-=')), //灵活布局沾满多余的位置
    //               Text('34567893234234243430-='),
    //               Text('34567890-='),
    //               Text('34567890-='),
    //             ],
    //           ),
    //         )));

    // var stack = new Stack(
    //   // 层叠布局
    //   alignment: const FractionalOffset(0.5, 0.8), // 对齐
    //   children: <Widget>[
    //     new CircleAvatar(
    //       // 圆头像
    //       backgroundImage: new NetworkImage(
    //           'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
    //       radius: 100.0,
    //     ),
    //     new Container(
    //       decoration: new BoxDecoration(color: Colors.lightBlue),
    //       child: Text('324567634567'),
    //     ),
    //     new Positioned(
    //       // 层叠定位组件
    //       bottom: 10.0,
    //       right: 10.0,
    //       child: Text('65432345678'),
    //     )
    //   ],
    // );
    // return MaterialApp(
    //   title: '',
    //   home: Scaffold(
    //     appBar: AppBar(
    //       title: Text('32456789'),
    //     ),
    //     body: Center(
    //       child: stack,
    //     ),
    //   ),
    // );

    // var card = new Card(
    //   child: Column(
    //     children: <Widget>[
    //       ListTile(
    //         title: Text('9876543567898765456789'),
    //         subtitle: Text('dfgdfghdsaghj65435675467'),
    //         leading: new Icon(
    //           Icons.add_comment,
    //           color: Colors.lightBlue,
    //         ),
    //       ),
    //       new Divider(),
    //       ListTile(
    //         title: Text('9876543567898765456789'),
    //         subtitle: Text('dfgdfghdsaghj65435675467'),
    //         leading: new Icon(
    //           Icons.add_comment,
    //           color: Colors.lightBlue,
    //         ),
    //       ),
    //       new Divider(),
    //       ListTile(
    //         title: Text('9876543567898765456789'),
    //         subtitle: Text('dfgdfghdsaghj65435675467'),
    //         leading: new Icon(
    //           Icons.add_comment,
    //           color: Colors.lightBlue,
    //         ),
    //       ),
    //     ],
    //   ),
    // );
    // return MaterialApp(
    //   title: '',
    //   home: Scaffold(
    //     appBar: AppBar(
    //       title: Text('876543'),
    //     ),
    //     body: Center(
    //       child: card,
    //     ),
    //   ),
    // );
  }
}

// 封装Widget插件
class ListViewCom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // ListView
      scrollDirection: Axis.vertical, // 横向，纵向
      children: <Widget>[
        new Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
        new Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
        new Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
        new Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg'),
        new ListTile(
          // 给列表添加东西
          leading: new Icon(Icons.access_time),
          title: new Text('icon'),
        ),
        new ListTile(
          leading: new Icon(Icons.accessible),
          title: new Text('icon1'),
        ),
        new ListTile(
          leading: new Icon(Icons.ac_unit),
          title: new Text('icon2'),
        ),
        new ListTile(
          leading: new Icon(Icons.access_alarm),
          title: new Text('ico3'),
        )
      ],
    );
  }
}
